<template>
  <div v-if="isShow" ref="rightMenu" class="g-right-click-menu" :style="style">
    <div
      v-for="(item, index) in data"
      :key="index"
      class="operating"
      @click.stop="operatingRightAction($event, item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, watch } from "vue";
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  left: {
    type: Number,
    default: 0
  },
  type: {
    type: Number,
    default: 1
  },
  dataInfo: {
    type: Object,
    default: () => {}
  },
  top: {
    type: Number,
    default: 0
  },
  isViewInfo: {
    type: Boolean,
    default: true
  }
});
const isShow = ref(false);

const style = computed(() => {
  const clientHeight = document.body.clientHeight;
  const y = props.top;
  if (clientHeight - y < 100) {
    return `left:${props.left}px;bottom:${clientHeight - y}px`;
  }
  return `left:${props.left}px;top:${props.top}px`;
});

watch(
  () => {
    return props.left;
  },
  (newName, oldName) => {
    if (newName) isShow.value = true;
  }
);
onMounted(() => {
  window.addEventListener("click", function () {
    isShow.value = false;
  });
  window.addEventListener("mousedown", function (e) {
    if (e.which === 3) {
      isShow.value = false;
    }
  });
});
/**
 * @func 点击操作
 * @param val 1、置顶/取消置顶 2、开启/关闭免打扰 3、开启/关闭星标 4、删除会话
 */
const emit = defineEmits(["onChange"]);
function operatingRightAction($event, val) {
  emit("onChange", {
    $event,
    val
  });
  isShow.value = false;
}
</script>

<style lang="scss" scoped>
.g-right-click-menu {
  position: fixed;
  left: 0;
  z-index: 2020;
  width: auto;
  height: auto;
  padding: 5px 0;
  text-align: center;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  box-shadow: 2px 2px 8px #96969633;

  .operating {
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1;
    color: #666;
    white-space: nowrap;
    cursor: pointer;
  }

  .operating:hover {
    color: var(--el-color-white);
    background-color: var(--el-color-primary);
  }
}
</style>
